<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        图片预加载
        图片懒加载
    -->
    <script>
    let imgs = [
        'https://mp.processon.com/chart_image/id/5b1669b3e4b068c25215207f.png',
    ]
    let count = 0;
    for (let img of imgs) {
      //生成图片对象
        let image = new Image()
        image.src = img
        console.log('加载中。。请稍等')
        //给图片增加渲染完成事件，是异步的
        image.onload = () => {
            count ++
            if(imgs.length === count){ //当渲染个数与图片相同时，所有图片加载完成
                console.log(count, '所有图片渲染完成')
            }
        }
    }
    </script>
    <img src="https://mp.processon.com/chart_image/id/5b1669b3e4b068c25215207f.png">
</body>
</html>